<template>
	<full-page-layout :gradient="gradient" :base-background-color="baseBackgroundColor" :gradient-value="gradientValue" :safety="safety" :full="full">
		<view class="header-page-containter">
			<view class="header-page-containter-header">
				<page-header :color="headerColor" :gradient="headerGradient" :gradient-value="headerGradientValue" :background-color="headerBackgroundColor" @click="onHeaderAsideClick">
					<template v-slot:left v-if="$scopedSlots.headerleft"><slot name="headerleft"></slot></template>
					{{title}}
					<template v-slot:right v-if="$scopedSlots.headerright"><slot name="headerright"></slot></template>
				</page-header>
			</view>
			<view class="header-page-containter-body" :style="{backgroundColor:backgroundColor}">
				<slot></slot>
			</view>
			<view class="header-page-footer" :style="{backgroundColor:backgroundColor}">
				<slot name="footer"></slot>
			</view>
		</view>
	</full-page-layout>
</template>

<script>
import FullPageLayout from './FullPageLayout.vue'
import PageHeader from './PageHeader.vue'
export default {
	name:'headerPageCompontent',
	emits:['headerclick'],
	components:{FullPageLayout,PageHeader},
	props:{
		/* 是否启用底色渐变（backgroundImage） */
		gradient:{
			type:Boolean,
			default:false
		},
		/* 底色渐变(backgroundImage)值，css语法，default时使用默认渐变色 */
		gradientValue:{
			type:String,
			default:'default'
		},
		backgroundColor:{
			type:String,
			default:''
		},
		baseBackgroundColor:{
			type:String,
			default:''
		},
		safety:{
			type:Boolean,
			default:true
		},
		title:{
			type:String,
			default:'Title'
		},
		headerColor:{
			type:String,
			default:'#212121'
		},
		/* 头部是否启用底色渐变（backgroundImage） */
		headerGradient:{
			type:Boolean,
			default:false
		},
		/* 头部底色渐变(backgroundImage)值，css语法，default时使用默认渐变色 */
		headerGradientValue:{
			type:String,
			default:'default'
		},
		headerBackgroundColor:{
			type:String,
			default:''
		},
		full:{
			type:Boolean,
			default:true
		}
	},
	data(){
		return {
			bodyHeight:0
		}
	},
	methods:{
		onHeaderAsideClick(type){
			this.$emit('headerclick',type)
		},
		getBodyHeight(){
			return this.bodyHeight
		}
	},
	mounted() {
		const query = uni.createSelectorQuery().in(this);
		query.select('.header-page-containter-body').boundingClientRect(data => {
			this.bodyHeight = data.height
		}).exec();
	}
}
</script>

<style scoped lang="scss">
.header-page-containter{
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	.header-page-containter-header,.header-page-footer{
		flex-shrink: 0;
	}
	.header-page-containter-body{
		flex-grow: 1;
		overflow: auto;
	}
}
</style>